<template>
  <div class="app-container home">

    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>河北师范大学第二课堂管理系统CMS</h2>
        <p>临近毕业，毕业论文需要配套作品，再加之想到之前发现学校的第二课堂管理系统还是非常老旧的技术、加载很慢、设计不合理等诸多原因，
          决定设计一款速度优良，结构合理，用户体验感比较好的第二课堂管理系统。</p>
        <p>
          这个系统默认角色主要有三个大类，分别是学生、学院、学生处，当然也能动态的添加角色，赋予相关的权限（百度参考RBAC）
          ，此外还有一个特殊角色-超级管理员，这个角色是最高权限的存在，需要慎重使用，搞不好就能做到删库跑路。
        </p>
        <p style="color: red;">
          如果你是一名学生，你可以在学生入口→加分细则 查看什么情况下能进行加分。
          <br>
          不止这些，你还能在学生入口→加分项 自行添加自己的加分项，当然，至少需要提供相关证明材料。
          <br>
          过后呢，这些提交的信息需要学院和学院处审核，通过后可以在学生入口→加分项，点击异步算分即可重新计算你的最新分数奥
        </p>
        <p>
          <b>当前版本:</b> <span>{{ version }}</span>
        </p>
        <p>
          <el-tag type="danger">暂不开源</el-tag>
        </p>
        <p>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-cloudy"
            plain
            @click="goTarget('https://space.bilibili.com/367445056')"
          >访问作者哔哩哔哩
          </el-button>
          <el-button
            size="mini"
            icon="el-icon-s-home"
            plain
            @click="goTarget('https://user.qzone.qq.com/4206359')"
          >访问作者QQ空间主页
          </el-button>
        </p>
      </el-col>

      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-row>
          <el-col :span="24">
            <h2>技术选型</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h4>后端技术</h4>
            <ul>
              <li>SpringBoot</li>
              <li>SpringSecurity</li>
              <li>JWT</li>
              <li>MyBatis</li>
              <li>Druid</li>
              <li>Fastjson</li>
              <li>Netty</li>
              <li>Stream</li>
              <li>...</li>
            </ul>
          </el-col>
          <el-col :span="12">
            <h4>前端技术</h4>
            <ul>
              <li>Vue</li>
              <li>Vuex</li>
              <li>Element-ui</li>
              <li>Axios</li>
              <li>Sass</li>
              <li>Quill</li>
              <li>JavaScript</li>
              <li>ECMAScript6</li>
              <li>...</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-row>
          <el-col :span="12">
            <h2>我的总学分</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <h1 :style="cssStyle">总学分：{{ this.score }}分</h1>
            <el-divider/>
            <ul>
              <li>4分合格</li>
              <li>8分优秀</li>
            </ul>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    <!--    分割线-->
    <el-divider>我是分割线</el-divider>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>最新公告、通知</span>
          </div>
          <el-collapse v-model="activeNameNotice" accordion>
            <el-collapse-item v-for="item in noticeList" :title="item.noticeTitle" :name="item.noticeId">
              <!--              内容填充区-->
              <div class="ql-container ql-snow">
                <div class="ql-editor" v-html="item.noticeContent">
                </div>
              </div>

            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">

          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse v-model="activeNameLog" accordion>
            <el-collapse-item title="v1.0 - 2021-3-1" name="1">
              <ol>
                <li>河北师范大学第二课堂管理系统正式发布</li>
              </ol>
            </el-collapse-item>
          </el-collapse>


        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>关于</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-s-promotion"></i> 作者CSDN：
              <el-link
                href="https://blog.csdn.net/qq_29762001"
                target="_blank">https://blog.csdn.net/qq_29762001
              </el-link>
            </p>
            <p>
              <i class="el-icon-user-solid"></i> QQ群：
              <a href="https://jq.qq.com/?_wv=1027&k=r3OnDHRE" target="_blank"
              > 950433057</a
              >
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：4206359
              <a href="javascript:;"></a>
            </p>
            <p>
              <i class="el-icon-money"></i> QQ：4206359
              <a href="javascript:;"
                 class="支付宝信息"></a
              >
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider/>

    <el-row>

      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <bar-chart/>


      </el-col>


    </el-row>
  </div>
</template>

<script>
import {listNotice} from "@/api/system/notice";
import {test} from "@/api/login";
import errorCode from "@/utils/errorCode";
import BarChart from './dashboard/BarChart'


export default {
  name: "index",
  components: {BarChart},
  data() {
    return {
      // 版本号
      version: "Release 1.0",
      // 遮罩层
      loading: true,
      score: 0,
      // 总条数
      total: 0,
      cssStyle: undefined,
      // 公告表格数据
      noticeList: [],
      activeNameLog: "1",
      activeNameNotice: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      myMap: {
        id: 1,
        arr: [1, 2, 3],
        map: {m: 1, n: 2},
        // listMap: [{}, {str: "str2"}]
        listMap: [{"str": "112221"}],
        // te: [{m: 1}]
      }
    };
  },
  created() {
    this.getList();
    this.setCss();
    this.showMyScore();
    this.printAuthorWord();
    this.test();
  },
  methods: {
    test() {


    },
    printAuthorWord() {
      console.log("你好！当你看到这段文字，" +
        "\n那说明咱们俩特别有缘分，" +
        "\n欢迎一起学习！" +
        "\n我的QQ是：4206359" +
        "\n期待和你一起，改变世界！" +
        "\n         ---王清江");
    },
    showMyScore() {
      if (this.$store.state.user.grade != null) {
        this.score = this.$store.state.user.grade;
      }
    },
    setCss() {
      let score = this.$store.state.user.grade;
      if (score < 4) {
        this.cssStyle = "color:red;";
      } else if (score < 8) {
        this.cssStyle = "color:#F60DC2;";
      } else if (score >= 8) {
        this.cssStyle = "color:green;";
      } else if (score == null) {
        this.$store.state.user.grade = 0;
        this.cssStyle = "color:red;";
      }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        //需要把activeNameNotice设置成第一个。
        this.activeNameNotice = this.noticeList[0].noticeId;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
//--------------
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

